<template>
	<div class="teacher-intro">
		<cmp-crumb :list="crumb"></cmp-crumb>
		<div class="intro-block base-intro">
			<div class="teacher-img">
				<img :src="details.avatar" alt="" />
			</div>
			<div class="intro-cont">
				<div class="teacher-name">
					<span>{{details.teacherName}}</span>
					<!-- <div class="follow">关注</div> -->
					<el-button size="mini" type="danger" @click="follow">{{hasFollow == 1 ? '取消关注': '关注'}}</el-button>
				</div>
				<div class="tabs">
					<span>浏览量:{{details.articleHit}}</span> | <span>粉丝量: {{details.fansNum}}</span>
				</div>
				<div class="base-info" v-html="details.content">
					简介:

				</div>
			</div>
		</div>
		<div class="intro-block">
			<cmp-subTitle :shouMore="false" title="教师介绍"></cmp-subTitle>
			<!-- <div class="block-title title-center">
				<i class="title-icon"></i>
				<div class="title-name">教／师／介／绍</div>
				<i class="title-icon "></i>
			</div> -->
			<div class="intro-cont intro" v-html="details.summary">
			</div>
			<!-- 	<div class="block-title title-center">
				<i class="title-icon "></i>
				<div class="title-name">认／证／信／息</div>
				<i class="title-icon "></i>
			</div>
			<div class="intro-cont">
				{{details.teacherTitle}}
			</div> -->
		</div>
		<div class="intro-block">
			<cmp-subTitle :shouMore="false" title="特色课程推荐"></cmp-subTitle>
			<!-- <div class="block-title title-center">
				<i class="title-icon"></i>
				<div class="title-name">特／色／课／程／推／荐</div>
				<i class="title-icon "></i>
			</div> -->
			<div class="intro-cont lesson-list" v-if="lessons && lessons.length != 0">
				<div class="lesson-item" v-for="item in lessons" @click="goPage('/VideoIntro', {lessonId: item.lessonId})">
					<div class="lesson-img">
						<div class="lesson-tags">
							<div class="lesson-tag lesson-tag-search">信息检索</div>
							<div class="lesson-tag lesson-type-cost">公益</div>
						</div>
						<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img.png" alt="" />
							</div>
						</el-image>
					</div>
					<div class="lesson-cont">
						<div class="lesson-title">{{item.lessonName}}</div>
						<div class="lesson-initro">
							<div class="lesson-types">
								<div class="types-item">实战</div>
								<div class="types-item">中级</div>
								<div class="types-item">
									<i class="el-icon-user-solid"></i>
									<span>{{item.likeNum}}</span>
								</div>
							</div>
							<div class="lesson-star">
								<el-rate></el-rate>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="intro-cont lesson-list no-data" v-else>
				<el-empty description="暂无课程"></el-empty>
			</div>
		</div>
	</div>
</template>

<script>
	import cmpCrumb from '@/components/cmp-crumb'
	import {
		getTeacherIntroApi
	} from '@/api/Lesson'
	import {
		getLessonByTeacherApi,
		followTeacherApi,
		delFollowTeacherApi,
		getHasFollowApi
	} from '@/api/teacher'
	import cmpSubTitle from '@/components/cmp-subTitle'
	export default {
		data() {
			return {
				crumb: [{
					title: '主页',
					url: '/'
				}, {
					title: '名师展播列表',
					url: '/Teacher'
				}, {
					title: '名师展播详情',
					url: '/TeacherIntro'
				}],
				token: this.$store.state.app.token || this.$cookies.get('sy_token'),
				intro: {},
				teacherId: this.$route.query.id,
				details: {},
				lessons: [],
				hasFollow: false
			}
		},
		created() {
			this.getIntro()
			this.getLesson()
			this.getHasFollow()
		},
		methods: {
			getHasFollow() {
				getHasFollowApi({
					teacherId: this.teacherId
				}).then(res => {
					this.hasFollow = res.data
				})
			},
			follow() {
				if (this.hasFollow == 1) {
					delFollowTeacherApi({
						teacherId: this.teacherId
					}).then(res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: res.msg
							})
							this.hasFollow = 0
						} else {
							this.$message({
								type: 'error',
								message: res.msg
							})
						}
					})
				} else {
					followTeacherApi({
						teacherId: this.teacherId
					}).then(res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: res.msg
							})
							this.hasFollow = 1
						} else {
							this.$message({
								type: 'error',
								message: res.msg
							})
						}
					})
				}
			},
			getIntro() {
				getTeacherIntroApi(this.teacherId).then(res => {
					this.details = res.data
					console.log(res)
				})
			},
			getLesson() {
				getLessonByTeacherApi({
					teacherId: this.teacherId,
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					this.lessons = res.rows
				})
			},
			goPage(url, query) {
				this.$router.push({
					path: url,
					query: query
				})
			},
		},
		components: {
			cmpCrumb,
			cmpSubTitle
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.teacher-intro {
		min-height: calc(100vh - 120px);

		.intro-block {
			width: @contWidth;
			margin: 0 auto 20px;
			padding: 10px 20px;
			background-color: #F4F8FF;
		}

		.base-intro {
			display: flex;
			padding: 20px;

			.intro-cont {
				width: calc(100% - 320px);
			}
		}

		.teacher-img {
			width: 300px;
			margin-right: 20px;
		}

		.teacher-name {
			display: flex;
			justify-content: space-between;
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.follow {
			font-weight: initial;
			font-size: 14px;
			padding: 10px 20px;
			border-radius: 3px;
			background-color: ;
		}

		.tabs {
			font-size: 12px;
			color: #666;
			margin-bottom: 20px;
		}

		.base-info {
			font-size: 14px;
			color: #333;
			line-height: 24px;
		}

		.block-title {
			padding: 34px 0 22px;
			display: flex;
			align-items: center;
			position: relative;
		}

		.title-center {
			justify-content: center;
		}

		.title-icon {
			width: 30px;
			height: 30px;
			margin: 0 13px;
			background: url(../assets/img/home_title_icon.png)no-repeat;
			background-size: 100% 100%;
		}

		.title-name {
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #000000;
			line-height: 27px;
		}

		.intro {
			padding: 0 20px;
			margin-bottom: 40px;
			min-height: 300px;
		}

		.lesson-list {
			display: flex;
			flex-wrap: wrap;
			padding: 40px 20px 20px;
		}

		.lesson-item {
			width: 234px;
			cursor: pointer;
			margin-bottom: 20px;

			&:not(:nth-of-type(5n)) {
				margin-right: 15px;
			}

		}

		.lesson-img {
			position: relative;
			height: 145px;
			border-radius: 6px;
			overflow: hidden;
		}

		.lesson-tags {
			position: absolute;
			z-index: 99;
			top: 9px;
			left: 0;
			width: 100%;
			padding: 0 6px;
			display: flex;
			justify-content: flex-end;
		}

		.lesson-tag {
			padding: 2px 3px;
			margin: 0 2px;
			font-size: 9px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
		}

		.lesson-tag-search {
			background: #C8C8C8;
			color: #000;
		}

		.lesson-type-cost {
			color: #E02020;
			background: #FFA9A9;
		}

		.lesson-cont {
			padding: 13px 8px;
		}

		.lesson-title {
			width: 100%;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 12px;
		}

		.lesson-initro {
			display: flex;
			justify-content: space-between;
		}

		.lesson-types {
			display: flex;
			align-items: center;
		}

		.types-item {
			margin-right: 12px;
			display: flex;
			align-items: center;
			font-size: 11px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;
		}

		.el-rate__icon {
			margin-right: 0px;
		}

		.no-data {
			justify-content: center;
		}
	}
</style>